@charset "utf-8";

@function vw($a){
    @return ( $a / 640 ) * 100vw;
}
header{
    position: absolute;
    top: 0;
    width: 100%;
    height: vw(75);
    .can2-er1{
        margin-left: vw(27);
        margin-top: vw(22);
        img{
           line-height: vw(75);
           width: vw(18);
           height: vw(31); 
        }
    }
    .can2-er2{
        margin-left: vw(246);
        
        b{
            font-size: vw(22.5);
            line-height: vw(75);
            
        }
    }
}
section{
    width: 100%;
    position: absolute;
    top: vw(75);
    bottom:0;
    .can2-section{
        margin-top: vw(57);
        margin-left: vw(28);
        width: vw(584);
        height: vw(760);
        background: #e5e5e5;
        border-radius: vw(30);
        box-shadow: 0 vw(10) vw(4) #c8c8c8;
        .section-quan{
            width: 100%;
            height: vw(130);
            border-bottom: 1px solid #898989;
            .section-quan1{
                width: vw(118);
                height: vw(96);
                margin-top: vw(21);
                margin-left: vw(45);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .section-quan2{
                margin-top: vw(46);
                margin-left: vw(29);
               h1{
                   
                   font-size: vw(18); 
                   font-weight: normal;
                }
                h2{
                    margin-top: vw(21);
                    font-size: vw(22);
                    font-weight: normal;
                }
            }
        }
            .section-quan-font{
               margin-left: vw(100);
                p{
                    margin-top: vw(20);
                    font-size: vw(18);
                    color: #7e7e7e;
                }
                
            }
            .section-quan-img{
                width: vw(360);
                height: vw(360);
                margin: 0 auto;
                margin-top: vw(16);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .section-quan-font1{
                font-size: vw(18);
                text-align: center;
                h1{
                    margin-top: vw(10);
                    font-weight: normal;
                }
                h2{
                    margin-top: vw(5);
                    font-weight: normal;
                }
                h3{
                    margin-top: vw(5);
                    font-weight: normal;
                }
            }
    }
    .can-phone2-position{
        position: relative;
         hr{
            margin-top: vw(50);
            }
        .can-phone2-p{
            width: vw(316);
            height: vw(30);
            background: white;
            position: absolute;
            left: 25%;
            top: vw(-10);
            p{
                font-size: vw(16);
                text-align: center;
            }
        }
    }
    ul{
        width: 100%;
        height: vw(74);
        li{
            margin-top: vw(20);
            width: vw(140);
            height: vw(74);
            font-size: vw(16);
            line-height: r(74);
            float: left;
            margin-left: vw(80);
            vertical-align: middle;
            img{
                vertical-align: middle;
                margin-right: vw(5);
                width: vw(52);
                height: vw(45);
            }
        }
        li:first-child{
            margin-left: vw(30);
        }
    }
   
}


.bee-photo:before{
                    animation: diao 10s linear;
                }
                @keyframes diao{
                    0%{transform: rotateY(0deg) translateX(vw(0));box-shadow: vw(4) vw(0) vw(10) red;}
                    25%{transform: rotateY(45deg) translateX(vw(-300));box-shadow:vw(4) vw(0) vw(10) red;}
                    50%{transform: rotateY(90deg) translateX(vw(-600));box-shadow: vw(4) vw(0) vw(10) red;}
                    75%{transform: rotateY(180deg) translateX(vw(600));box-shadow: vw(4) vw(0)  vw(10) red;}
                    100%{transform: rotateY(0deg) translateX(vw(0));box-shadow: vw(4) vw(0) vw(10) red;}
}    
